//import React from 'react';
// import logo from './logo.svg';
// import './App.css';

// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }

// export default App;

import React from 'react'

// function App(){
//   return (
//     <div>
//         <header>react study</header>
//     </div>
//   )
// }
import Father from './views/Father.js';
export class App  extends React.Component{
  
  constructor(props){
    super(props)

    this.state = {
      inputValue:'', //input中的值
      hello:'<p>我是html</p>',
      text:'我赖在'
    }
  }

  inputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }

  message(e){
    console.log(e)
  }

  render(){
    return (
      <div>
        {
          //绑定html元素
        }
        <div dangerouslySetInnerHTML={{__html:this.state.hello}}></div>
        <button className="square">
          {this.props.value}
        </button>
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>

        {
          //父子组件传值 父组件向子组件传递内容，靠属性的形式传递。
        }
        <Father content={this.state.text} message={this.message.bind(this)} />
      </div>
    )
  }
}

export default App;